<!--
 * @Author: your name
 * @Date: 2020-12-28 11:32:50
 * @LastEditTime: 2020-12-31 11:14:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\views\cart\index.vue
-->
<!--
 * @Author: your name
 * @Date: 2020-12-28 11:32:50
 * @LastEditTime: 2020-12-30 22:00:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\views\cart\index.vue
-->
<template>
  <div class="cart">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车为空"
      v-if="cartItems.length === 0"
    />
    <div class="swipe-cell" v-else>
      <van-swipe-cell
        v-for="prod in cartItems"
        :key="prod.id"
      >
        <van-card
          :price="prod.price.toFixed(2)"
          :title="prod.title"
          :thumb="prod.image"
        >
          <template #thumb class="card-img">
            <van-checkbox
              :value="prod.checked"
              class="checkbox"
              @click="changeCheckedStatus(prod.id)"
            ></van-checkbox>
            <van-image :src="prod.image" class="img" />
          </template>

          <template #num>
            <van-stepper
              :value="prod.count"
              theme="round"
              button-size="18"
              @change="change(prod.id, $event)"
            />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            class="delete-button"
            @click="removeItem(prod.id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <van-submit-bar :price="totalMoney" button-text="提交订单" >
      <van-checkbox
        :value="allChecked && cartItems.length !== 0"
        @click="checkAll"
      >全选</van-checkbox>
    </van-submit-bar>
  </div>

</template>

<script>
export default {
  name: 'Cart',
  computed: {
    // 购物车中的商品
    cartItems() {
      return this.$store.state.cart.cartItems
    },
    // 判断 商品是否全部选中
    allChecked() {
      return this.$store.getters['cart/allChecked']
    },
    // 计算 总价钱
    totalMoney() {
      return this.$store.getters['cart/totalMoney'] * 100
    }
  },
  created() {
    console.log(this.$store)
  },
  methods: {
    // 删除购物车中商品
    removeItem(id) {
      this.$store.commit('cart/remove', id)
    },
    // 修改商品数量
    change(id, val) {
      // console.log('改变：', val)
      this.$store.commit('cart/modifyNum', {
        id,
        count: val
      })
    },
    // 改变商品选中状态
    changeCheckedStatus(id) {
      this.$store.commit('cart/changeChecked', id)
    },
    // 全选
    checkAll() {
      this.$store.commit('cart/checkAll', !this.allChecked)
    }
  }
}
</script>

<style lang="scss" scoped>
  .delete-button {
    height: 100%;
  }
  .van-card__thumb{
    margin-right: 0;
    display: flex;
    justify-content: space-between;
    width: 130px;
    margin-left: -10px;
  }
  .van-card__content{
    margin-left: 10px;
  }
  .checkbox{
    width: 20px;
    margin-right: 8px;
  }
  .img{
    width: 78%;
  }
  .swipe-cell{
    padding-bottom: 50px;
  }
  .custom-image{
    margin-top: 45%;
  }
</style>
